<template>
	<view class="popup" @touchmove.stop.prevent="moveHandle">
		<view class="info-wrap">
			<text class="info">物流信息</text>
			<text class="name">物流名称：{{getinfo.title}}</text>
			<text class="number">运单号码：{{getinfo.order_number}}<text  @click="copy(getinfo.order_number)" class="copy">复制</text></text>
			<text class="fee">客服电话：{{getinfo.phone}} <text class="call" @click="getPhone(getinfo.phone)">立即拨打</text></text>
			<text class="fee">查询地址：{{getinfo.address}} <text class="copy"  @click="copy(getinfo.address)">复制</text></text>
			<view class="close" @tap="closeBtn">
				<image src="/static/img/login.png"></image>
				<text>关闭</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		created: function(options) {
			//调用需要的方法 
			this.getLogistic();
		},
		data() {
			return {
				getinfo:{}
			}
		},
		//弹窗接收值
		props: {
			mod_id: {
				type: String,
				default() {
					return ''
				}
			}
		},
		methods: {
			// 获取获取客服信息
			getPhone(value) {
				uni.makePhoneCall({
					phoneNumber: value //仅为示例
				});
			},
			// 获取获取物流信息
			getLogistic() {
				this.$api.getOrderLogistic({odetail_id:this.mod_id}).then(res => {
					this.getinfo = res.data.data;
					
				})
			},
			//复制单号
			copy(value){
				console.log(value);
				uni.setClipboardData({
					data: value,
					success: function() {
						//重点~做笔记
						//在success中加入uni.hideToast()可以解决
						// uni.hideToast();
						//以下就可自定义操作了~
						uni.showToast({//提示
						  title:'复制成功'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			
		
			},
			moveHandle() {
				return;
			}
		},
		props: {
			closeBtn: {
				default: function() {
					
				}
			}
		}
	}
</script>

<style>
	
	.popup {
		position: fixed;
		top:  0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.3);
	}
	.info-wrap {
		width: 650rpx;
		height: 684rpx;
		background: rgba(255,255,255,1);
		border-radius: 30rpx;
		margin-left: 50rpx;
		margin-top: calc((100vh - 684rpx) / 2);
		overflow: auto;
	}
	.info {
		display: block;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
		margin-left: 270rpx;
		margin-top: 39rpx;
	}
	.name {
		display: block;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 60rpx;
		margin-top: 50rpx;
	}
	.number {
		display: block;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 60rpx;
		margin-top: 30rpx;
	}
	.fee {
		width: 500rpx;
		display: block;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 60rpx;
		margin-top: 30rpx;
		word-wrap: break-word;
	}
	.copy {
		/* display: block; */
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(254,177,71,1);
		text-align: center;
		/* margin-top: 30rpx; */
		margin-left: 20rpx;
	}
	.call {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(254, 177, 71, 1);
		margin-left: auto;
		/* margin-top: -2px; */
		margin-left: 20rpx;
	}
	.close {
		position: relative;
		width: 320rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin-top: 60rpx;
		margin-left: 180rpx;
	}
	.close image {
		width: 100%;
		height: 100%;
	}
	.close text {
		position: absolute;
		left: 132rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
	}
</style>
